<template>
    <div class="page rdsp-fix-botttom-page" data-page="addRectification" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">整改</div>
        </div>
        <div class="page-content pdbottom100">
            <div id="keyAlarmPic_addRectification_{{getNewId}}" style="margin: 10px 20px;"></div>
            <div class="form-hiddenDanger">
                <div class="rdsp-inner-content">
                    <div class="left-title">停用系统</div>
                    <div class="hiddenDanger-block">
                        <div id="id-hiddenDanger-block-item1_{{getNewId}}" class="hiddenDanger-block-item block-active" @click="stopSys(1)">
                            <div id="id-hiddenDanger-block-circle1_{{getNewId}}" class="hiddenDanger-block-circle circle-active"></div>
                            <span>否</span>
                        </div>
                    </div>
                    <div class="hiddenDanger-block">
                        <div id="id-hiddenDanger-block-item2_{{getNewId}}" class="hiddenDanger-block-item" @click="stopSys(2)">
                            <div id="id-hiddenDanger-block-circle2_{{getNewId}}" class="hiddenDanger-block-circle"></div>
                            <span>是</span>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content is-stop" id="id-is-stop1_{{getNewId}}">
                    <div id="id-start-stop-time_{{getNewId}}" class="hiddenDanger-block start-stop-time" style="width: 100%;height: 20px;">
                        <div class="left-title fl" style="margin-left: 21px;width: 100px;">开始停用时间</div>
                        <div class="right-con has-arrow">
                            <div id="start_stop_time_{{getNewId}}" class="right-select">开始停用时间</div>
                            <i id="crTb_resUnit_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                        </div>
                    </div>
                    <div id="id-end-stop-time_{{getNewId}}" class="hiddenDanger-block end-stop-time" style="width: 100%;height: 20px;">
                        <div class="left-title fl" style="margin-left: 21px;width: 100px;">结束停用时间</div>
                        <div class="right-con has-arrow">
                            <div id="end_stop_time_{{getNewId}}" class="right-select">结束停用时间</div>
                            <i id="crTb_resUnit_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                        </div>
                    </div>
                </div>
                <div id="id-is-stop3_{{getNewId}}" class="rdsp-inner-content is-stop">
                    <div class="left-title">是否报消防部门备案</div>
                    <div class="hiddenDanger-block">
                        <div id="report-hiddenDanger-block-item1_{{getNewId}}" class="hiddenDanger-block-item block-active" @click="reportFireDepartment(1)">
                            <div id="report-hiddenDanger-block-circle1_{{getNewId}}" class="hiddenDanger-block-circle circle-active"></div>
                            <span>否</span>
                        </div>
                    </div>
                    <div class="hiddenDanger-block">
                        <div id="report-hiddenDanger-block-item2_{{getNewId}}" class="hiddenDanger-block-item" @click="reportFireDepartment(2)">
                            <div id="report-hiddenDanger-block-circle2_{{getNewId}}" class="hiddenDanger-block-circle"></div>
                            <span>是</span>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content is-stop" id="id-is-stop2_{{getNewId}}">
                    <div class="left-title">安全措施</div>
                    <div class="hiddenDanger-block">
                        <div class="right-con">
                            <textarea id="saftyText_{{getNewId}}" class="right-con-textarea cancle-ios-write" placeholder="请填写安全措施"></textarea>
                            <div class="voice">
                                <div id="safty_voice_{{getNewId}}" class="voice-before">
                                    <i class="iconfont icon-yuyin1"></i>点击语音输入
                                </div>
                                <div class="voice-after" style="display: none">
                                    <div class="voice-after-time"><i class="iconfont icon-yuyin-copy"></i></div>
                                    <div class="delete"><i class="iconfont icon-icon-shanchu-copy"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="left-title"><span class="red">*</span>整改描述</div>
                    <div class="hiddenDanger-block">
                        <div class="right-con">
                            <textarea id="troubleText_{{getNewId}}" class="right-con-textarea cancle-ios-write" placeholder="请填写整改描述"></textarea>
                            <div class="voice">
                                <div id="crTb_inputDetails_{{getNewId}}" class="voice-before">
                                    <i class="iconfont icon-yuyin1"></i>点击语音输入
                                </div>
                                <div class="voice-after" style="display: none">
                                    <div class="voice-after-time"><i class="iconfont icon-yuyin-copy"></i></div>
                                    <div class="delete"><i class="iconfont icon-icon-shanchu-copy"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rdsp-fix-botttom" @click="savaRectification(3)">
                <span>完成，提交审核</span>
            </div>
            <div class="rdsp-fix-botttom btn2" @click="savaRectification(1)">
                <span>保存，继续整改</span>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .rdsp-fix-botttom.btn2{
        margin-top: 10px;
        border: 1px solid #378bf6;
        background-color: #fff;
        color: #999;
    }
    .hiddenDanger-block{
        margin-top: 8px;
    }
    .rdsp-inner-content.is-stop{
        display: none;
    }
    .rdsp-inner-content .left-title{
        margin-left: 20px;
        width: 100%;
        font-size: 15px;
        color: #333333;
        font-weight: bold;
    }
    .hiddenDanger-block-item {
        height: 40px;
        border-radius: 4px;
        margin: 10px 20px;
        border: 1px solid rgba(208, 208, 208, 1);
        color: #999999;
        line-height: 40px;
        padding-left: 20px;
    }

    .hiddenDanger-block-item .hiddenDanger-block-circle {
        width: 12px;
        height: 12px;
        border: 1px solid rgba(169, 169, 169, 1);
        border-radius: 50%;
        display: inline-block;
        margin-right: 15px;
    }

    .hiddenDanger-block-item.block-active {
        border: 1px solid rgba(36, 113, 202, 1);
        color: rgba(36, 113, 202, 1);
    }

    .hiddenDanger-block-item .hiddenDanger-block-circle.circle-active {
        background: rgba(36, 113, 202, 1);
    }
    .cus_wup {
        float: left;
        padding-left: 0px;
    }

    .inp_cus {
        width: 100%;
        height: 165px;
    }

    .up_cus {
        margin: 6px;
        position: relative;
        float: left;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .ul_cus {
        padding: 3px;
        float: left;
    }

    .cus {
        height: 100px;
        padding-left: 18px;
    }

    #file {
        font-size: 1px;
        top: 0px;
        left: 0px;
        opacity: 0;
        width: 100px;
        height: 100px;
        display: block;
        color: #999999;
    }

    .add_image {
        position: absolute;
        top: 8px;
        width: 100px;
        height: 100px;
    }

    #line_width {
        width: 100%;
        height: auto;
    }

    .del {
        width: 14px;
        height: 14px;
        right: 5px;
        position: absolute;
    }

    .button-fill {
        width: 91% !important;
        height: 44px !important;
        margin: 0 auto;
        background: linear-gradient(to top, #238afb, #40affe);
        line-height: 0px;
        font-size: 16px;
    }

    /* #kalarm .messagebar-attachments {
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
    } */
    .select-right {
        width: 13px;
        height: 13px;
        background: url(./img/common/select.png);
        background-repeat: no-repeat;
        float: left;
        position: absolute;
        vertical-align: middle;
        background-size: 100%;
    }
    .demo-swiper .swiper-slide {
        font-size: 25px;
        font-weight: 300;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        color: #333333;
    }
    .demo-swiper .swiper-slide {
        box-sizing: border-box;
        /* border: 1px solid #ddd; */
        background: #fff;
    }
    .demo-swiper {
        margin: 0px 0 35px;
        font-size: 18px;
        height: 200px;
    }
    .demo-swiper.demo-swiper-auto .swiper-slide {
        width: 85%;
    }
    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
        width: 70%;
    }
    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
        width: 30%;
    }
    .BMap_cpyCtrl {
        display: none;
    }
    .anchorBL {
        display: none;
    }

    #line_width ul {
        display: inline-flex;
    }
    .messagebar-attachments{
        padding: 0px!important;
        padding-left: 18px;
    }

</style>
<script>
return {
    data: function() {
        return {
            imageArr: [],
            picUrls:'',
            troubleRank:  this.$route.params.troubleRank,//等级id
            categoryId:0,//类别id
            currentOrgId:0,//责任单位id
            hiddenDangerId:0,//隐患整改id
            createAccount:'',//创建人账户
            voiceFlag:false,
            detailVoiceUrl:"",
            detailVoiceLength:0,
            status:null,
            isStopSystem:0, //是否停用系统 0：不停用 1：停用,
            isFireDepartmentRecord:0, //是否报备消防部门 0：不报备 1：报备
            getNewId: (new Date()).getTime(),
        }
    },
    methods: {
        //status=1保存不提交    //status=3保存并提交
        savaRectification:function(status) {
            var self = this;
            self.status = status;
            if (self.voiceFlag){
                self.voiceFlag = false;
                native.saveTheVoiceFile(self.$route.params.orgId*1);
            } else {
                if(getClickEnabel(4000)){
                  self.callbackVoiceFile("",0);
                }
            }
        },
        //接受原生的语音Url
        callbackVoiceFile:function(voiceUrl,wavLength){
            var self = this;
            var text = $("#troubleText_"+self.getNewId)[0].value;
            if (self.imageArr.length == 0){
                app.methods.showToastCenter('请上传图片');
                return;
            }
            if (text == "") {
                app.methods.showToastCenter('请填写整改说明');
                return;
            }
            self.picUrls=self.imageArr.join(",");
            common.loading(1);

            Dao.troubleback({
                orgId:this.$route.params.orgId,
                hiddenDangerId:this.$route.params.hiddenDangerId,
                picUrls:self.picUrls,
                type:1,
                gradeId:this.$route.params.troubleRank,
                categoryId:this.$route.params.categoryId,
                status:self.status,
                createAccount:userInfor.accountName,
                createAccountName:userInfor.name,
                detailDesc:text,
                detailVoiceUrl:voiceUrl,
                detailVoiceLength:wavLength,
                isStopSystem:self.isStopSystem,
                isFireDepartmentRecord:self.isFireDepartmentRecord,
                safetyMethod:(self.isStopSystem==0)?"":$("#saftyText_"+self.getNewId).val(),
                stopStartTimeStr:(self.isStopSystem==0)?"":self.stopStartTimeStr,
                stopEndTimeStr:(self.isStopSystem==0)?"":self.stopEndTimeStr,
            },function(data) {
                 common.loading(0);
                if (self.status==1){
                    app.methods.showToastCenter('保存成功');
                } else if (self.status == 3){
                    app.methods.showToastCenter('提交核实中成功');
                    indexHiddenDangerStatus=1;
                    hiddenDangerListStatus=0;
                }
                app.methods.backToTab();
            });
        },
        //语音输入回调
        voiceCollectionData:function(voiceStr,componentId) {
            var self = this;
            var text = $("#"+componentId)[0].value;
            if(!voiceStr || "" === voiceStr.trim()){
                app.methods.showToastCenter("未能识别您说的语音,请重试。");
            }else{
                $("#"+componentId).val(text + voiceStr);
                // app.methods.showToastCenter(self.detailVoiceUrl);
            }
        },
        voidStart_detail: function(){
            var self = this;
            self.voiceFlag = true;
            native.startVoice("troubleText_"+self.getNewId,true);
        },
        voidStart_safety_detail: function(){
            var self = this;
            self.voiceFlag = true;
            native.startVoice("saftyText_"+self.getNewId,true);
        },
        //停用系统
        stopSys:function(type){
            var self = this;
            jQuery("#id-hiddenDanger-block-item1_"+self.getNewId).removeClass("block-active");
            jQuery("#id-hiddenDanger-block-item2_"+self.getNewId).removeClass("block-active");
            jQuery("#id-hiddenDanger-block-circle1_"+self.getNewId).removeClass("circle-active");
            jQuery("#id-hiddenDanger-block-circle2_"+self.getNewId).removeClass("circle-active");

            if (type==1){
                jQuery("#id-hiddenDanger-block-item1_"+self.getNewId).addClass("block-active");
                jQuery("#id-hiddenDanger-block-circle1_"+self.getNewId).addClass("circle-active");
            }else {
                jQuery("#id-hiddenDanger-block-item2_"+self.getNewId).addClass("block-active");
                jQuery("#id-hiddenDanger-block-circle2_"+self.getNewId).addClass("circle-active");
            }


            jQuery('#id-start_stop_time_'+self.getNewId+',#id-end_stop_time_'+self.getNewId).html("");
            jQuery("#saftyText_"+self.getNewId).val("");
            self.stopStartTimeStr="";
            self.stopEndTimeStr="";
            self.isStopSystem = type-1;
            self.isFireDepartmentRecord = self.isStopSystem === 0 ? 0 : self.isFireDepartmentRecord
            if(type==1){
                $("#id-is-stop1_"+self.getNewId).hide();
                $("#id-is-stop2_"+self.getNewId).hide();
                $("#id-is-stop3_"+self.getNewId).hide();
            }else{
                $("#id-is-stop1_"+self.getNewId).show();
                $("#id-is-stop2_"+self.getNewId).show();
                $("#id-is-stop3_"+self.getNewId).show();
                //绑定安全措施描述
                jQuery("#safty_voice_"+self.getNewId).click(function(e) {
                    //第二个参数是否需要保存语音
                    if(getClickEnabel(4000)){ app.view.current.el.f7View.router.currentPageEl.f7Component.voidStart_safety_detail()};
                })
                //停用时间
                jQuery("#id-start-stop-time_"+self.getNewId).off().click(function(e) {
                    loadSelectedDate_Fn(1,function(data){
                        let newData = data.singleDate.split("  ");
                        let transTimeYMDH = newData[0] + " " + newData[1].slice(0,5);
                        let transTimeYMDH00 = newData[0] + " " + newData[1].slice(0,5) + ":00";
						$("#start_stop_time_"+self.getNewId).html(transTimeYMDH);
				    	self.stopStartTimeStr=transTimeYMDH00;
					});
                })
                jQuery("#id-end-stop-time_"+self.getNewId).off().click(function(e) {
                    if(self.stopStartTimeStr){
                        loadSelectedDate_Fn(1,function(data){
                            let newData = data.singleDate.split("  ");
                            let transTimeYMDH = newData[0] + " " + newData[1].slice(0,5);
                            let transTimeYMDH00 = newData[0] + " " + newData[1].slice(0,5) + ":00";
                            if(moment(self.stopStartTimeStr).isBefore(transTimeYMDH)){
                                $("#end_stop_time_"+self.getNewId).html(transTimeYMDH);
                                self.stopEndTimeStr=transTimeYMDH00;
                            }else{
                                app.methods.showToastCenter('开始时间大于结束时间，请重新选择');
                            }
                        });
                    }else{
                        app.methods.showToastCenter('请先选择开始时间');
                    }
                })
            }
        },
        // 是否上报消防部门
        reportFireDepartment: function(type) {
            var self = this;
            jQuery("#report-hiddenDanger-block-item1_"+self.getNewId).removeClass("block-active");
            jQuery("#report-hiddenDanger-block-item2_"+self.getNewId).removeClass("block-active");
            jQuery("#report-hiddenDanger-block-circle1_"+self.getNewId).removeClass("circle-active");
            jQuery("#report-hiddenDanger-block-circle2_"+self.getNewId).removeClass("circle-active");

            if (type==1){
                jQuery("#report-hiddenDanger-block-item1_"+self.getNewId).addClass("block-active");
                jQuery("#report-hiddenDanger-block-circle1_"+self.getNewId).addClass("circle-active");
            }else {
                jQuery("#report-hiddenDanger-block-item2_"+self.getNewId).addClass("block-active");
                jQuery("#report-hiddenDanger-block-circle2_"+self.getNewId).addClass("circle-active");
            }

            self.isFireDepartmentRecord = type-1
        }
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            var $ = self.$;

            // jQuery(".form-hiddenDanger .rdsp-inner-title").click(function(e) {
            //     jQuery(e.currentTarget).parent().toggleClass("show");
            //     jQuery(e.currentTarget).siblings(".rdsp-inner-content").slideToggle();
            // })

            //绑定语音输入隐患描述
            jQuery("#crTb_inputDetails_"+self.getNewId).click(function(e) {
                //第二个参数是否需要保存语音
                if(getClickEnabel(4000)){ app.view.current.el.f7View.router.currentPageEl.f7Component.voidStart_detail()};
            })

            self.imageArr = [];
            //初始化上传
            upLoadImagesCompt(jQuery("#keyAlarmPic_addRectification_"+self.getNewId),function(pic,isAdd){
                let _pic = common.addWatermark(pic)
                if(isAdd == "add"){
                    self.imageArr.unshift(_pic);
                }else{
                    let index = self.imageArr.indexOf(_pic);
                    self.imageArr.splice(index,1);
                }
            },true,null,'addRectification_container_' + self.getNewId,'addRectification_pick_' + self.getNewId,'',true);
        },
        pageAfterIn: function (e, page) {
            var self = this;

        },
        pageBeforeRemove: function(e, page) {

        }
    }
}
</script>
